<template>
  <div style="height: 83vh;overflow: hidden;margin-bottom: 4vw">
    <pull-to    :bottom-load-method="loadmore"
                :bottom-config="BOTTOM_DEFAULT_CONFIG"
                :bottom-block-height=50>
      <router-link to="APP">
        <div class="goodsImgBox" v-for="(v,i) in categoryList" :key="i">
          <img :src=v.image alt="">
          <div style="box-shadow: 0 0 1vw .2vw #f5f5f5;background: #fff;margin-top: -2vw;width: 100%;height:19vw;">
            <!--<div style="width: 100%;height:19vw;">-->
            <p  style="padding-left: 1vw;box-sizing:border-box">{{v.goods_name}}</p>
            <p class="Goodsprice">￥{{v.sell_price}} <span>￥{{v.market_price}}</span></p>
          </div>
        </div>
      </router-link>
    </pull-to>
    <div class="clear"></div>
  </div>
</template>

<script>
  import pullTo from 'vue-pull-to'
  export default {
    name: "goodsList",
    props:['goodsList','id'],
    components:{
      pullTo
    },
    data(){
      return{
        categoryList:[],
        pages:1,
        /*id:0,*/
        BOTTOM_DEFAULT_CONFIG: {
          pullText: "上滑继续加载",
          triggerText: "释放更新",
          loadingText: "加载中,请稍后",
          doneText: "内容已全部展示了",
          failText: "加载失败",
          loadedStayTime: 1000,
          stayDistance: 50,
          triggerDistance: 50,
          list: ""
        },
      }
    },
    methods: {
      loadmore(loaded) {
        this.pages++;
        this.$http({
          url: '/super/api/Shop/getGoodsByCid',
          method: 'post',
          data: {
            category_id: this.id,
            page: this.pages,
            time: this._globe.time1,
            device_id: this._globe.device_id,
            version: this._globe.version,
            platform: this._globe.platform,
            token: this._globe.token1,
          }
        })
          .then(response => {
            let data = response.data.data;
            this.maxPage = data.all_page;
            if (this.pages <= this.maxPage) {
              this.categoryList = this.categoryList.concat(data.list);
              this.BOTTOM_DEFAULT_CONFIG.doneText = this.BOTTOM_DEFAULT_CONFIG.pullText;
              loaded("done");
            } else {
              this.BOTTOM_DEFAULT_CONFIG.doneText = "内容已全部展示";
              //结束刷新功能
              loaded("done");
            }
          });
      }

    },
    watch:{
      id() {
      }

    },
    created(){
      var that=this;
      this.$http({
        url:'/super/api/Shop/getGoodsByCid',
        method:'post',
        data:{
          category_id:this.id,
          page:this._globe.page,
          time:this._globe.time1,
          device_id:this._globe.device_id,
          version:this._globe.version,
          platform:this._globe.platform,
        }
      })
        .then(function (response) {
          const resData=response.data;
          if(resData.code==1){
            that.categoryList=resData.data.list;
          }
        })
        .catch(function (response) {
        })
    }
  }
</script>

<style scoped lang="scss">
  .file-lists{
    width:100%;
    height: 100%;
  }
  @media screen and (max-width: 375px) and (min-width: 320px){
    p{
      font-size: 13px !important;
    }
  }
  .goodsImgBox{
    width:44vw;
    height: auto;
    display: inline-block;
    float: left;
    margin: 2vw 1vw 0 2vw;
    img{
      width: 44vw;
      height: 44vw;
    }
    p{
      font-size: 16px;
      color: #353535;
      margin-top: 0.4vw;
      text-align: left;
      width: 100%;
      height: 11vw;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      /* line-clamp: 2;*/
      /* text-overflow: ellipsis;*/
    }
    .Goodsprice{
      font-size: 16px;
      color:#FF4C50;
      float: left;
      margin-top: 0vw;
      span{
        font-size: 10px;
        color: #888;
        text-decoration: line-through;
      }
    }
  }
</style>
